<template>
    <el-form class="agent-pay-form" :model="agentPayForm">
        <!-- 国家 -->
        <el-form-item class="select-item">
            <div class="date-key">國家</div>
            <el-select v-model="agentPayForm.country" size="large" placeholder="請选择">
                <el-option v-for="item in countries" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <!-- 银行名称 -->
        <el-form-item class="select-item">
            <div class="date-key">銀行名稱</div>
            <el-select v-model="agentPayForm.bank" size="large" placeholder="請选择">
                <el-option v-for="item in banks" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <!-- 貨幣 -->
        <el-form-item class="select-item">
            <div class="date-key">貨幣</div>
            <el-select v-model="agentPayForm.currency" size="large" placeholder="請选择">
                <el-option v-for="item in currencies" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <!-- 提现金额 -->
        <el-form-item class="input-item">
            <div class="date-key">提現金額</div>
            <el-input v-model="agentPayForm.withdrawMoney" size="large" placeholder="請輸入" />
        </el-form-item>
        <!-- 收款账户 -->
        <el-form-item class="input-item">
            <div class="date-key">收款帳號</div>
            <el-input v-model="agentPayForm.receiveMoneyAccount" size="large" placeholder="請輸入" />
        </el-form-item>
        <!-- 收款人名称 -->
        <el-form-item class="input-item">
            <div class="date-key">收款人名稱</div>
            <el-input v-model="agentPayForm.receiveMoneyUser" size="large" placeholder="請輸入" />
        </el-form-item>
        <!-- 谷歌验证器 -->
        <el-form-item class="input-item">
            <div class="date-key">谷歌驗證器</div>
            <el-input v-model="agentPayForm.googleCode" size="large" placeholder="請輸入" />
        </el-form-item>
        <!-- 提交按鈕 -->
        <el-form-item class="submit-btn-item">
            <el-button type="primary">提交</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue'


const countries = ref([
    { value: 'TW', label: '台灣' },
    { value: 'US', label: '美國' },
    { value: 'JP', label: '日本' },
    { value: 'KR', label: '韓國' },
    { value: 'CA', label: '加拿大' },
]);

const banks = ref([
    { value: '建设银行', label: '建设银行' },
    { value: '工商银行', label: '工商银行' },
    { value: '农业银行', label: '农业银行' },
    { value: '邮政储蓄银行', label: '邮政储蓄银行' },
    { value: '招商银行', label: '招商银行' },
    { value: '中信银行', label: '中信银行' },
    { value: '浦发银行', label: '浦发银行' },
    { value: '兴业银行', label: '兴业银行' },
    { value: '广发银行', label: '广发银行' },
    { value: '民生银行', label: '民生银行' },
    { value: '光大银行', label: '光大银行' },
]);

const currencies = ref([
    { value: 'rmb', label: '人民币' },
    { value: 'usd', label: '美元' },
    { value: 'eur', label: '欧元' },
    { value: 'gbp', label: '英镑' },
    { value: 'jpy', label: '日元' },
]);


const agentPayForm = reactive({
    country: '美国',
    bank: '农业银行',
    currency: '人民币',
    withdrawMoney: 123,
    receiveMoneyAccount: '1112233',
    receiveMoneyUser: '王小明',
    googleCode: '12c',
});
</script>

<style scoped lang="scss">
.date-key {
    width: 100px;
    color: #3D3D3D;
    margin-right: 20px;
}

.agent-pay-form {
    margin: 0 auto;
    width: 340px;
    :deep(.select-item) {
        .el-form-item__content {
            flex-wrap: nowrap;
            .el-select--large {
                .el-select__wrapper {
                    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
                    height: 34px;
                    padding-top: 0;
                    padding-bottom: 0;
                }
            }
        }
    }
    :deep(.submit-btn-item) {
        .el-button.el-button--primary {
            width: 140px;
            height: 34px;
            background-color: #2FC2AF;
            margin: 0 auto;
        }
    }

    :deep(.input-item) {
        .el-form-item__content {
            flex-wrap: nowrap;
            .el-input__wrapper {
                background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
                height: 34px;
            }
        }
    }
}
</style>